<template>
  <div class="site-content">
    <div class="login-wrap">
      <div class="ms-login">
        <div class="sidebox">
          <div class="sidebox-header">
            <div class="sidebox-logo">
              <img src="../image/login/logo.png" alt="" />
              <span
                style="
                  font-size: 26px;
                  font-weight: bold;
                  color: #fff;
                  margin-left: 5px;
                "
                >Logo</span
              >
            </div>
            <h1 class="sidebox-title"></h1>
            <h2 class="sidebox-subtitle">xxx考试系统说明</h2>
          </div>
          <div class="sidebox-content">
            <ul class="ex-desc">
              <li>1、不能用手机</li>
              <li>2、不能翻阅书籍</li>
              <li>3、不能左顾右盼</li>
              <li>4、请在规定的时间内作答</li>
              <li>5、请勿代考！！！</li>
            </ul>
          </div>
          <div class="sidebox-footer">
            <a href="#">
              <strong>xxx学校</strong>
              <span style="margin: 0 7px">-</span>
              xxxxx综合管理系统
              <i class="el-icon-d-arrow-right"></i>
            </a>
          </div>
        </div>
        <div class="form">
          <div class="form-container">
            <header class="form-header">
              <h2 style="display: inline-block">
                <span>登录</span>
              </h2>
            </header>
            <el-form
              class="login-container"
              :model="loginForm"
              ref="loginForm"
              :rules="rules"
              label-position="left"
            >
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="loginForm.username"
                  auto-complete="off"
                  placeholder="用户名"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="loginForm.password"
                  auto-complete="off"
                  placeholder="密码"
                ></el-input>
              </el-form-item>
              <el-checkbox class="login-remember" v-model="checked">记住密码</el-checkbox>
                <el-form-item>
                    <el-button class="login-button" type="primary" @click="submitClick('loginForm')">登录</el-button>
                </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      loginForm: {
        username: "admin",
        password: "123",
      },
      checked: true,
    };
  },
  methods:{
      submitClick(loginForm){

      }
  }
};
</script>

<style scoped>
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.site-content {
  min-height: calc(100vh - 323px);
  border-bottom: 1px solid transparent;
  display: block;
}

.login-wrap {
  min-width: 1040px;
  min-height: 99.9vh;
  position: relative;
}
.login-wrap:before {
  width: 394px;
  height: 468px;
  background-image: url("../image/login/bg-left-eac.png");
  left: 0;
}
.login-wrap:after {
  width: 487px;
  height: 412px;
  background-image: url("../image/login/bg-right-caca01.png");
  right: 0;
}
.login-wrap:before,
.login-wrap:after {
  content: "";
  position: fixed;
  bottom: 0;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
  box-sizing: inherit;
}
.ms-login {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 560px;
  padding: 0%;
  z-index: 10;
  transform: translate(-50%, -50%);
  box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);
}
.ms-login:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  z-index: 3;
}

.sidebox,
.form {
  margin: 0 auto;
  width: 50%;
  height: 100%;
}
.sidebox {
  position: relative;
  padding: 80px 80px 48px;
  background-color: #40485b;
  z-index: 20;
  float: left;
  color: #fff;
}
.sidebox-logo img {
  height: 50px;
  vertical-align: middle;
}
.sidebox-logo span {
  vertical-align: middle;
}

.sidebox-title {
  font-size: 40px;
}

h1 {
  min-height: 1rem;
  font-size: 2rem;
}
h2 {
  font-size: 1.714rem;
}
.sidebox-subtitle {
  font-weight: normal;
}
.sidebox-content {
  position: relative;
  top: 15px;
  -webkit-box-flex: 1;
  flex: 1;
  width: 100%;
  height: 50%;
}
.sidebox-content .ex-desc li {
  margin-bottom: 10px;
  font-size: 14px;
}

.sidebox-footer {
  font-size: 14px;
  padding-top: 40px;
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.sidebox-footer a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.form {
  background-color: #fff;
  z-index: 5;
  position: relative;
  float: right;
}
.form-container {
  height: 100%;
  padding: 64px 75px 48px;
  position: relative;
}
.form .form-header {
  display: flex;
  margin-bottom: 24px;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  align-items: flex-end;
}

.login-remember{
    margin-bottom: 10px;
}

.login-button{
    width: 100%;
}
</style>

